<!DOCTYPE html>
<html class="x-admin-sm">
  
  <head>
    <meta charset="UTF-8">
    <title>菜单类型添加</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/index.css">
    <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/index.js"></script>
 
  </head>
  
  <body>
    <div class="layui-fluid">
        <div class="layui-row">
            <form  id="mtform" method="post" class="layui-form layui-form-pane" enctype="multipart/form-data">
                <div class="layui-form-item">
                    <label for="name" class="layui-form-label">
                        <span class="x-red">*</span>菜单类型名
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="mt_name" name="mt_name" required="" lay-verify="required"
                        autocomplete="off" class="layui-input">
                    </div>
                </div>
               
                <div class="layui-form-item">
                    <label for="name" class="layui-form-label">
                        <span class="x-red">*</span>示例图片
                    </label>
                    <div class="layui-input-inline">
                    	<img id="upimg" width="200px" height="100px" />
                    	<input class="layui-btn" type="button" value="添加图片" style="background: #66A8CC;">
                      	<input id="file"   name="mtexaimg"   style="opacity: 0;position: relative;top: -26px;"  accept="image/*"  type="file">
                       
                    </div>
                </div>
               
                <div class="layui-form-item layui-form-text">
                    <label for="desc" class="layui-form-label">
                        描述
                    </label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入内容" id="mt_desc" name="mt_desc" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                <button class="layui-btn" lay-submit="" lay-filter="add">增加</button>
              </div>
            </form>
        </div>
    </div>
    <script src="js/jquery.js"></script>
 
    <script>
    	
    	// 2. 监听作用域变化
      document.getElementById("file").onchange= function (ev1) {
        	
            // 2.1 获取用户上传的内容
            // console.log(this.value);    //C:\fakepath\guitar_head_v2_00-wallpaper-2560x1440.jpg value内保存的是上传路径
            var path = this.value;

            // 2.2 字符串截取
            var suffix = path.substr(path.lastIndexOf('.'));
            // console.log(suffix)

            // 2.3 统一转换成小写
            var lowerSuffic = suffix.toLowerCase()

            // 2.4 判断
            if(lowerSuffic === '.jpg' || lowerSuffic === '.png' || lowerSuffic === '.gif'){
            	 
            	// alert(path));
                //回显图片
               
           var file = this.files[0];
           var reader = new  FileReader();
          reader.readAsDataURL(file);
          reader.onload = function (ev){
         $("#upimg").attr("src", ev.target.result);
     }
                
            }
            else{
            			layui.use("layer", function () {
                //提示错误信息
    					layer.msg('上传图片格式不正确',{icon:7,time:1000});
             })

            }
        }
    	
        layui.use(['form','layer'], function(){
            $ = layui.jquery;
          var form = layui.form
          ,layer = layui.layer;
        
          //自定义验证规则
          form.verify({
            nikename: function(value){
              if(value.length < 5){
                return '昵称至少得5个字符啊';
              }
            }
            ,pass: [/(.+){6,12}$/, '密码必须6到12位']
            ,repass: function(value){
                if($('#L_pass').val()!=$('#L_repass').val()){
                    return '两次密码不一致';
                }
            }
          });
          
          
           

          //监听提交
          form.on('submit(add)', function(data){ 
         
         
         if($('#file').val()==''){
         				layui.use("layer", function () {
                //提示错误信息
    					layer.msg('请上传图片',{icon:7,time:1000});
             })
         	
         	return false;
         }
        
        

    
           
     var temFile = document.getElementById('file');
    var fileObj = temFile.files[0];
    var formData = new FormData();
    formData.append('mtexaimg', fileObj);
    formData.append("mt_name",$("#mt_name").val()); //添加其他参数
    formData.append("mt_desc",$("#mt_desc").val());
 

       

         
         
            //发异步，把数据提交给服务器
             		$.ajax({
    			type:"post",
    			url:"http://localhost:16111/memurbac/addMemutype",
    			xhrFields:{withCredentials: true},
    			dataType:"json",     			
          processData: false,
          contentType: false,
    			data:formData,
    			success:function(res){
    				//表示为新增菜单类型成功
    				if(res.code==200){
    			    	//提示成功信息
    				
    					 layer.alert(res.data, {icon: 6},function () {
                // 获得frame索引
                var index = parent.layer.getFrameIndex(window.name);
                parent.selects();
                //关闭当前frame
                parent.layer.close(index);
            });
            
    
    				}else{
    					//提示错误信息
    				
    						 layer.alert(res.error, {icon: 7},function () {
                // 获得frame索引
                var index = parent.layer.getFrameIndex(window.name);
                //关闭当前frame
                parent.layer.close(index);
            });
    					
    				}
    			},
    			error:function(error){
    				//提示错误信息
    			
    								 layer.alert(error, {icon: 2},function () {
                // 获得frame索引
                var index = parent.layer.getFrameIndex(window.name);
                //关闭当前frame
                parent.layer.close(index);
            });
    			}
    				
    		});
           return false;
          });


          }); 
          
      



        
        //重新加载js文件
        function loadJs(file)
{
    var head = $("head").remove("script[role='reload']");
    $("<scri"+"pt>"+"</scr"+"ipt>").attr({ 
    role:'reload',src:file,type:'text/javascript'}).appendTo(head);
}
    </script>



  </body>

</html>